<template>
	<view class="body" >
		<view class="header">
			<image src="../../static/login/header.png" class="logo" />
		</view>
		<view class="content">
			<view class="form">
				<view class="form-item">
					<image src="@/static/login/user.png"  class="logo" />
					<input type="text" placeholder="请输入用户名" v-model="username" />
				</view>
				<view class="line"></view>
				<view class="form-item">
					<image src="@/static/login/password.png" mode="aspectFit" class="logo" />
					<input type="password" placeholder="请输入密码" v-model="password" password />
				</view>
			</view>
			<view class="fotget">
				<view class="fpass" @click="showToast()">忘记密码？</view>
				<view class="words">没有账号？联系蜂鸟云商务提供注册</view>
			</view>
			<view class="submit">
				<button @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
			</view>
			<view class="protocol">
				<radio class="custom-radio" :checked="agreed" @click="onRadioClick" color="#40aafe" />
				<view class="protocol-text">
					我已阅读并同意
					<label @click="getProtocol('user')">《蜂鸟云用户协议》</label>
					<label @click="getProtocol('privacy')">《蜂鸟云隐私政策》</label>
					<label @click="showToast()">《蜂鸟云合作协议》</label>
					<label @click="showToast()">《蜂鸟云服务结算协议》</label>
				</view>
			</view>
			<view class="wxlogin" @click="onWxLogin()">
				<image src="@/static/login/wx.png" mode="aspectFit" class="logo" />
				<view class="wxlogin-text">微信登录</view>
			</view>

		</view>
		<view class="footer">
			<image src="@/static/login/footer.png" mode="aspectFit" class="logo" />
		</view>

	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { showToast } from '@/utils/auth';
import { apiPostLogin,apiGetProtocol } from '@/api/login';

onLoad(() => {
	// 检查是否已登录
	const token = uni.getStorageSync('token')
    if (token) {
        // 已登录，自动跳转到首页
        uni.reLaunch({
            url: '/pages/index/index'
        })
    }
})

// 提交登录表单
const username = ref('')
const password = ref('')
const login = async () => {
	// 检查用户名和密码是否为空，是否勾选协议
    if (!username.value || username.value.length < 11) {
        uni.showToast({ title: '请输入用户名', icon: 'none', duration: 1000 })
        return
    }
    if (!password.value || password.value.length < 6) {
        uni.showToast({ title: '请输入密码', icon: 'none', duration: 1000 })
		return
    }
	if (!agreed.value) {
        uni.showToast({ title: '请先同意协议', icon: 'none', duration: 1000 })
        return
    }
	// 封装登录数据
	const jsonData = {
		username: username.value,
		password: password.value
	}
    const res = await apiPostLogin(jsonData)
    if (res.success === true) {
		uni.setStorageSync('token', res.token)
		uni.setStorageSync('userInfo', res.data)
		uni.reLaunch({ url: '/pages/index/index' })
        uni.showToast({ title: '登录成功', icon: 'none', duration: 1500 })
	} else {
        uni.showToast({ title: res.msg, icon: 'none', duration: 2000 })
    }
}

//协议勾选
const agreed = ref(false) // 协议选中状态
function onRadioClick() {
    // 先假设用户想选中
    agreed.value = true
    uni.showModal({
        content: '登录蜂鸟云微信小程序，请先阅读并同意《蜂鸟云用户协议》《蜂鸟云隐私政策》《蜂鸟云合作协议》《云账户服务结算协议》',
        showCancel: true,
        confirmText: '同意',
        cancelText: '我再想想',
        success: function (res) {
            if (res.confirm) {
                agreed.value = true
                uni.showToast({ title: '已同意' , icon: 'none' , duration: 1000 })
            } else if (res.cancel) {
                agreed.value = false
                uni.showToast({ title: '已取消' , icon: 'none' , duration: 1000 })
            }
        }
    })
}

// 协议查看
const protocol = ref('');
const getProtocol = async (type) => {
	const res = await apiGetProtocol();
    if (res.success === true) {
        protocol.value = res.data
		console.log(protocol.value['用户协议'])
        if(type == 'user'){
        	 uni.navigateTo({
                url: '/pages/login/protocol?url=' + encodeURIComponent(protocol.value['用户协议'])
            })
        }else if(type == 'privacy'){
			 uni.navigateTo({
                url: '/pages/login/protocol?url=' + encodeURIComponent(protocol.value['隐私政策'])
            })
		}
		else if(type == 'cooperate'){}
		else if(type == 'settle'){}
    } else {
        uni.showToast({ title: res.msg, icon: 'none', duration: 2000 })
    }
}

// const onWxLogin = () => {
//     uni.login({
//         provider: 'weixin',
//         success: async function (loginRes) {
// 			const jsonData = {
// 				code: loginRes.code,
// 			}
// 			const res = await apiPostWxLogin(jsonData);
// 			console.log(res)
//         },
//         fail: function (err) {
//             uni.showToast({ title: '微信登录失败', icon: 'none' })
//         }
//     })
// }

</script>

<style lang="scss">
body {
	height: 100vh;
    display: flex;
    flex-direction: column;
	position: relative;
	// font-family: "Microsoft YaHei", SimHei, sans-serif;
}

.header {
	margin-bottom: 66.15rpx;
	image{
		width: 750rpx;
		height: 502.08rpx;
		
	}
}

.content {
	padding: 0 35rpx;
	.form{
		border: 1px solid rgba(0, 0, 0, 0.24);
		border-radius: 30rpx;
		padding: 38.54rpx 49.48rpx;
		box-shadow:0rpx 0rpx 5rpx rgba(0, 0, 0, 0.24);
		.form-item{
			font-size: 30rpx;
			display: flex;
			align-items: center;
			image{
				width: 50rpx;
				height: 46.88rpx;
				padding-right: 25.52rpx;
			}
		}

		.line{
			border: 1px dashed  rgba(204, 204, 204, 1);
			margin: 37.5rpx 0 18.75rpx 0; 
		}


	}
	
	.fotget{
		display: flex;
		justify-content: space-between;
		font-size: 20.83rpx;
		padding: 22.4rpx 48.96rpx 0rpx 48.96rpx;
		.fpass{
			color: #40AAFEFF;
		}
		.words{
			color: #898989FF;
		}
	}

	.submit{
		padding: 40rpx 23rpx 0 23rpx;

		button{
			border-radius: 50rpx;
			border: 0;
			background: linear-gradient(to right,#41CFFF,#409BFE);
			color: #FFFFFF;
		}
	}

	.protocol{
		display: flex;
		font-size: 19.79rpx;
		padding: 30rpx 95rpx 0 95rpx;
		.uni-radio-input{
			width: 29.17rpx;
			height: 29.17rpx;
			border-radius: 50%;
			background-color: #FFFFFF;
			border: 1px solid #0d94f6;
		}
		.protocol-text{
			padding-top: 6.77rpx;
			color: #666666FF;
			label{
				color: #40AAFEFF;
			}
		}

	}

	.wxlogin{
		margin: 30.21rpx 186rpx 0 186rpx;
		background-color: #D6FFE4FF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12.5rpx 0 ;
		border-radius: 50rpx;
		image{
			width: 53.13rpx;
			height: 42.71rpx;
		}
		.wxlogin-text{
				padding: 5.73rpx;
				color: #24DB5AFF;
				font-size: 35rpx;
			}
	}
	
}

.footer{
	margin-top: auto;
	position: absolute;
	bottom:0;
	image{
		display: block;
		width: 750rpx;
		height: 335.42rpx;
	}
}
</style>
